<template>
  <div id="resumeTemplate">
    <el-row style="min-height:65px;margin-top:20px;">
      <el-col :span="3">
        <div class="grid-content bg-purple"></div>
      </el-col>
      <el-col :span="18">
          <div class="filter"><span style="font-size:14px;">筛选：</span>
            <el-radio v-model="filter" label="3">全部模板</el-radio>
            <el-radio v-model="filter" label="0">免费模板</el-radio>
            <el-radio v-model="filter" label="1">会员专属</el-radio>
          </div>
        <div class="item" v-for="rt in resumeTemplateList" :key="rt.resumeTemplateId" @click="goResumeTemplateDetail(rt.resumeTemplateId)">
          <el-image style="border-bottom: 1px solid #ddd;width:100%;height:280px; text-align:center;vertical-align:middle"
                    :src="rt.coverUrl" fit="fit">
          </el-image>
          <div class="title">{{ rt.name }}</div>
          <div class="detail"><span>{{ rt.pay==0?'免费':'会员' }}
          </span>
            <span  style=" display: inline-block;width:150px;text-align:right;float: right; overflow: hidden; text-overflow: ellipsis;white-space: nowrap;">
            发布者：{{rt.adminName}}</span></div>
        </div>

        <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            align="center"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-size="pageSize"
            :hide-on-single-page="value"
            style="padding-top: 15px"
        >
        </el-pagination>
      </el-col>
      <el-col :span="3">
        <div class="grid-content bg-purple"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {getRTList} from "@/network/recruit";

export default {
  name: "ResumeTemplate",
  components:{
  },
  data(){
    return{
      filter:'3',
      value:true,
      currentPage:1,
      total:1000,
      pageSize:20,
      resumeTemplateList:[]
    }
  },
  mounted() {
    this.RTList();
  },
  watch:{
    filter(){
      this. RTList();
    }
  },
  methods:{
    handleCurrentChange(currentPage){
      this.currentPage = currentPage;
    },
    goResumeTemplateDetail(resumeTemplateId){
      this.$router.push({name:'resumeTemplateDetail',params:{resumeTemplateId:resumeTemplateId}});
    },
    RTList(){
      getRTList(this.filter,this.currentPage,this.pageSize).then(res=>{
        this.resumeTemplateList = res.data.data.list;
        this.total = res.data.data.total;
      })
    }
  }

}
</script>

<style scoped>
.grid-content {
  min-height: 50px;
  color: white;
  font-size: 14px;
}
.filter{
  margin-bottom: 20px;
}
.item{
  display: inline-block;
  width:19%;
  border:1px solid #c7c5c5;
  background-color:white;
  cursor:pointer;
  margin:0 8px 8px 0;
  box-shadow:
      6px 6px 12px rgba(0, 0, 0, .4),
      -6px -6px 12px rgba(255, 255, 255, .9);
}
.title{
  height:22px;
  line-height:22px;
  margin: 5px;
  font-size: 17px;
  color: #76acfd;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.detail{
  font-size:14px;
  margin: 5px;
  color: #a6a5a5
}
/deep/ .el-pagination.is-background .el-pager li{
  background-color:white;
}
/deep/ .el-pagination.is-background .btn-next{
  background-color:white;
}
/deep/ .el-pagination.is-background .btn-prev{
  background-color:white;
}
</style>